<!-- 已做 -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看答案 - 在线练习系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/view-answer.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0CB07B',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        light: '#FFFFFF'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
            }
        }
        body {
            background-image: url('/images/background.jpg'); /* 假设图片放在public/images目录下 */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            z-index: -1;  /* 确保低于内容层级 */
        }

            body::before {
                display:none;
            }
            @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
}

.animate-fade-out {
    animation: fade-out 0.3s ease-out forwards;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* 添加下拉菜单样式 */
#user-dropdown{
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    #user-dropdown a:hover{
        background-color: #f9fafb;
    }
    </style>
</head>
<body class="bg-neutral font-inter text-dark">
    <header class="bg-primary text-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-book-open text-white text-2xl"></i>
                <h1 class="text-xl font-bold text-white">在线练习系统</h1>
            </div>
            <nav>
                <ul class="flex space-x-6 items-center">
                    <li><a href="#" class="text-white hover:text-neutral-200 transition-colors duration-300">返回</a></li>
                </ul>
            </nav>
            <div class="flex items-center space-x-3">
                <!-- 修改开始：添加用户信息容器 -->
                <div id="user-info-container" class="hidden text-right mr-2">
                    <div id="user-name" class="font-medium text-white"></div>
                    <div id="student-id" class="text-xs text-white/80"></div>
                </div>
                <!-- 头像区域（添加下拉菜单） -->
                <div class="relative">
                    <a href="#" id="user-avatar" class="text-white hover:text-neutral-200 transition-colors duration-300">
                        <i class="fa-solid fa-user-circle text-xl"></i>
                    </a>
                    <!-- 下拉菜单 -->
                    <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden">
                        <a href="#" onclick="editProfile()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-user-edit mr-2"></i>编辑个人资料
                        </a>
                        <a href="#" onclick="logout()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
    </header>
    <main class="container mx-auto px-4 py-8">
        <div class="flex justify-between items-center mb-6">
            <div class="flex items-center">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white mr-4">查看答案</h2>
                <button id="header-back-btn" class="bg-gray-500 hover:bg-gray-600 text-white px-3 py-1 rounded-lg btn-hover flex items-center">
                    <i class="fa-solid fa-arrow-left mr-1"></i>返回
                </button>
            </div>
        </div>
        
        <div class="guide-card mb-8">
            <div class="bg-gradient-to-r from-blue-500/80 to-indigo-600/80 rounded-xl p-6 shadow-lg flex items-start backdrop-blur-sm">
                <div class="mr-4 mt-1">
                    <div class="w-12 h-12 rounded-full bg-white/30 flex items-center justify-center">
                        <i class="fa-solid fa-lightbulb text-white text-2xl"></i>
                    </div>
                </div>
                <div class="text-white">
                    <h3 class="text-xl font-bold mb-2">练习答案指南</h3>
                    <p class="mb-2">• 您可以查看每道题的正确答案和您的作答情况</p>
                    <p class="mb-2">• 选择题和填空题已自动批改，解答题需等待老师评阅</p>
                    <p class="mb-2">• 点击题目左下角的收藏按钮可以收藏重要题目</p>
                    <p>• 使用页面最下方的导出按钮可以导出本次练习记录</p>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-r from-blue-200/80 to-indigo-200/80 rounded-lg card-shadow p-6 mb-6">
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
                <div class="mb-4 md:mb-0">
                    <h3 id="practice-title" class="text-xl font-semibold"></h3>
                    <p id="course-info" class="text-gray-500"></p>
                </div>
                <div class="flex items-center">
                    <span class="text-gray-600 mr-2">你的得分：</span>
                    <span id="user-score" class="text-2xl font-bold text-primary"></span>
                </div>
            </div>

        <div id="questions-container" class="space-y-8 rounded-xl p-6" style="
            background: linear-gradient(135deg, rgba(172, 166, 246, 0.7) 0%, rgba(170, 200, 226, 0.7) 100%);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(200,220,255,0.3);
            box-shadow: 0 8px 20px rgba(0,50,150,0.03);">
            <!-- 题目将通过JavaScript动态加载 -->
        </div>
    
        </div>

        <div class="flex justify-center mt-8">
            <button id="back-btn" class="bg-primary text-white px-6 py-3 rounded-lg btn-hover flex items-center">
                <i class="fa-solid fa-arrow-left mr-2"></i> 返回练习列表
            </button>
            <button id="export-btn" class="bg-secondary text-white px-6 py-3 rounded-lg btn-hover flex items-center">
                <i class="fa-solid fa-download mr-2"></i> 导出练习记录
            </button>
        </div>
    </main>

    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">在线练习系统</h3>
                    <p class="text-gray-400">提供高质量的在线练习服务，帮助学生提升学习效果。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><i class="fa-solid fa-envelope mr-2"></i> softclass-platform@qq.com</li>
                        <li><i class="fa-solid fa-phone mr-2"></i> 114-514-1919-810</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 软课程管理平台 版权所有</p>
            </div>
        </div>
    </footer>

    <script type="module" src="js/view-answer.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</body>
</html>